<template>
  <div class='container'>
    <el-form :model="articleForm" :rules="rules" ref="articleForm" label-width="15%">
      <el-form-item label="文章标题" prop="title">
        <el-input placeholder="请输入文章标签" v-model="articleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleBody">
        <quillEditor :options="editorOption" @blur="$refs.articleForm.validateField('articleBody')" v-model="articleForm.articleBody"></quillEditor>
      </el-form-item>
      <el-form-item label="视频地址">
        <el-input placeholder="请输入视频地址" v-model="articleForm.videoURL"></el-input>
      </el-form-item>
    </el-form>
    <el-footer>
      <el-row type="flex" justify="end">
        <el-col :span="5">
          <el-button size="small" @click="$emit('close')">取消</el-button>
          <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
// 导入富文本编辑器及样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入富文本编辑器组件 按需导入 局部注册
import { quillEditor } from 'vue-quill-editor'
import { add, update } from '../../api/hmmm/articles'
// 定制 富文本 toolbar
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  // ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  // [{ header: 1 }, { header: 2 }],
  // [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  // [{ indent: '-1' }, { indent: '+1' }],
  // [{ size: [] }], // 配置字号
  // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  // [{ font: [] }], // 显示字体选择
  // [{ align: [] }], // 对齐方式-----[{ align: [] }]
  // ['clean'], // 清除文本格式-----['clean']
  ['blockquote'],
  ['code-block', 'image', 'link'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  props: {
    editRow: {
      type: Object,
      required: true
    }
  },
  components: { quillEditor },
  data () {
    return {
      // 富文本编辑器定制
      editorOption: {
        theme: 'snow',
        modules: {
          toolbar: toolbarOptions
        }
      },
      articleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [
          { required: 'true', message: '文章标题不能为空', trigger: 'blur' }
        ],
        articleBody: [
          { required: 'true', message: '文章内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.loadRow()
  },
  methods: {
    async hSubmit () {
      const valid = await this.$refs.articleForm.validate().catch(e => { })
      if (!valid) return
      if (this.editRow.id) {
        // 编辑
        try {
          await update(this.articleForm)
          this.$message.success('编辑文章成功')
          this.$emit('close')
          this.$emit('update')
        } catch (e) {
          this.$message.error('编辑文章失败')
        }
      } else {
        // 添加
        try {
          await add(this.articleForm)
          this.$message.success('添加文章成功')
          this.$emit('close')
          this.$emit('update')
        } catch (e) {
          this.$message.error('添加文章失败')
        }
      }
    },
    // 编辑状态回填数据
    loadRow () {
      if (this.editRow.id) {
        this.articleForm = { ...this.editRow }
      }
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .ql-editor {
  min-height: 150px;
}
</style>
